<template>
  <div style="padding:0 10px">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>连接统计</span>
            </div>
          </template>
          <el-row v-for="item in monitorData.connections" :key="item">
            <el-text>{{ item.label }}：</el-text>
            <el-text>{{ item.data }}</el-text>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>消息统计</span>
            </div>
          </template>
          <el-row v-for="item in monitorData.messages" :key="item">
            <el-text>{{ item.label }}：</el-text>
            <el-text>{{ item.data }}</el-text>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>节点统计</span>
            </div>
          </template>
          <el-row v-for="item in monitorData.nodes" :key="item">
            <el-text>{{ item.label }}：</el-text>
            <el-text>{{ item.data }}</el-text>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import {getMonitorData} from "@/api/iot/mqtt/monitor";
export default {
  data() {
    return {
      monitorData: {}
    };
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      // 请求监控数据
      const response = await getMonitorData();

      const data = response.data.data;

      // 初始化监控数据对象
      this.monitorData = {
        connections: this.createConnectionsData(data.connections),
        messages: this.createMessagesData(data.messages),
        nodes: this.createNodesData(data.nodes)
      };
    },
    // 处理连接数据
    createConnectionsData(connections) {
      return [
        { label: "共接受过连接数", data: connections.accepted },
        { label: "当前连接数", data: connections.size },
        { label: "关闭过的连接数", data: connections.closed }
      ];
    },
    // 处理消息数据
    createMessagesData(messages) {
      return [
        { label: "处理的包", data: messages.bytesPerTcpReceive },
        { label: "处理的消息字节数", data: messages.handledBytes },
        { label: "接收的包", data: messages.receivedPackets },
        { label: "接收的字节数", data: messages.receivedBytes },
        { label: "发送的包", data: messages.sendPackets },
        { label: "发送的字节数", data: messages.sendBytes },
        { label: "平均每次TCP包接收的业务包", data: messages.packetsPerTcpReceive },
        { label: "平均每次TCP包接收的字节数", data: messages.bytesPerTcpReceive }
      ];
    },
    // 处理节点数据
    createNodesData(nodes) {
      return [
        { label: "clientNodes", data: nodes.clientNodes },
        { label: "所有连接数", data: nodes.connections },
        { label: "绑定user数", data: nodes.users }
      ];
    }
  }
};
</script>
<style scoped>

</style>
